<template>
  <div class="M-upload">
    <div class="M-uploadWrap">
      <div class="M-item" v-for="(item, index) in data" :key="index">
        <img :src="item" width="100%" height="100%" />
        <span @click="delItem(item, index)">-</span>
      </div>
      <div class="M-item btn">
        <input type="file" value="" @change="upload($event)"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {   //data 需要是双向绑定的
      type: Array,
      default: []
    },
    config: {
      type: Object,
      default: {},
    }
  },
  methods: {
    delItem(item, index) {
        this.data.splice(index,1);
    },
    upload(e){
        //校验格式和大小，不过关则提示不过关(通过操作 vuex 公共数据来实现)

    }
  },
};
</script>

<style scoped lang="less">
.M-upload {
  &Wrap {
    @pa: 10/28rem;
    display: flex;
    flex-wrap: wrap;
    padding-top: @pa;
    .M-item {
      box-sizing: border-box;
      width: calc(100vw - 4 * @pa) / 3;
      margin-bottom: @pa;
      &.btn{
          border:  1px dashed #e1e1e1;
          position: relative;
          display: flex;
          justify-content: center;
          align-content: center;
          input{
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top:0;
              z-index: 3;
          }
          &:after{
              content: "+";
              color: #e1e1e1;
              font-size: 40/28rem;
              line-height: 1.5em;
          }
      }
    }
  }
}
</style>